<template>
  <div class="app-container">
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <span>我的工时</span>
      </div>

      <el-form
        :model="queryParams"
        ref="queryForm"
        :inline="true"
        v-show="showSearch"
        label-width="68px"
      >
        <el-form-item label="统计区间">
          <el-date-picker
            v-model="dateRange"
            type="daterange"
            size="small"
            range-separator="-"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            :picker-options="pickerOptions"
          >
          </el-date-picker>
        </el-form-item>
        <el-form-item>
          <el-button
            type="primary"
            icon="el-icon-search"
            size="mini"
            @click="handleQuery"
            >搜索</el-button
          >
          <el-button icon="el-icon-refresh" size="mini" @click="resetQuery"
            >重置</el-button
          >
        </el-form-item>
      </el-form>
    </el-card>

    <el-col :xs="24" :sm="12" :md="15" :lg="15">
      <el-card class="box-card mt10 mr5">
        <div slot="header" class="clearfix">
          <span>工时累计</span>
          <el-button
            style="float: right; padding: 3px 0"
            type="text"
            @click="handleExport1"
            >导出</el-button
          >
        </div>
        <el-table v-loading="loading1" :data="resList1">
          <el-table-column label="姓名" align="center" prop="nickName" />
          <el-table-column label="项目代码" align="center" prop="projectCode" />
          <el-table-column label="事务种类" align="center" prop="officeName" />
          <el-table-column label="开发阶段" align="center" prop="stageName" />
          <el-table-column label="工时(H)" align="center" prop="workHour" />
        </el-table>
      </el-card>
    </el-col>
    <el-col :xs="24" :sm="12" :md="9" :lg="9">
      <el-card class="box-card mt10 ml5">
        <div slot="header" class="clearfix">
          <span>项目工时累计</span>
          <el-button
            style="float: right; padding: 3px 0"
            type="text"
            @click="handleExport2"
            >导出</el-button
          >
        </div>
        <el-table v-loading="loading2" :data="resList2">
          <el-table-column label="姓名" align="center" prop="nickName" />
          <el-table-column label="项目代码" align="center" prop="projectCode" />
          <el-table-column label="工时(H)" align="center" prop="workHour" />
        </el-table>
      </el-card>
    </el-col>
  </div>
</template>

<script>
import { initFill, initFillProject } from '@/api/work/query'

export default {
  name: 'Query',
  data() {
    return {
      // 查询参数
      queryParams: {},
      // 显示搜索条件
      showSearch: true,
      // 遮罩层
      loading1: false,
      loading2: false,
      // 总条数
      total: 0,
      // 我的工时累计
      resList1: [],
      // 项目工时累计
      resList2: [],
      // 日期选择
      pickerOptions: {
        shortcuts: [
          {
            text: '最近一周',
            onClick(picker) {
              const end = new Date()
              const start = new Date()
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
              picker.$emit('pick', [start, end])
            }
          },
          {
            text: '最近一个月',
            onClick(picker) {
              const end = new Date()
              const start = new Date()
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
              picker.$emit('pick', [start, end])
            }
          },
          {
            text: '最近三个月',
            onClick(picker) {
              const end = new Date()
              const start = new Date()
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
              picker.$emit('pick', [start, end])
            }
          }
        ]
      },
      // 日期范围
      dateRange: ''
    }
  },
  created() {
    this.init()
  },
  methods: {
    /** 初始化 */
    init() {
      if (this.dateRange && this.dateRange.length > 0) {
        this.dateRange = this.dateRange.map((e) => this.parseTime(e))
      }
      this.getList1()
      this.getList2()
    },
    /** 我的工时累计 */
    getList1() {
      this.loading1 = true
      initFill(this.addDateRange(this.queryParams, this.dateRange)).then(
        (response) => {
          this.resList1 = response.data
          this.loading1 = false
        }
      )
    },
    /** 项目工时累计 */
    getList2() {
      this.loading2 = true
      initFillProject(this.addDateRange(this.queryParams, this.dateRange)).then(
        (response) => {
          this.resList2 = response.data
          this.loading2 = false
        }
      )
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.init()
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.dateRange = ''
      this.resetForm('queryForm')
      this.handleQuery()
    },
    /** 导出工时累计 */
    handleExport1() {
      this.download(
        'work/fill/exportFill',
        {
          ...this.queryParams
        },
        `工时累计信息表_${new Date().getTime()}.xlsx`
      )
    },
    /** 导出项目工时累计 */
    handleExport2() {
      this.download(
        'work/fill/exportPro',
        {
          ...this.queryParams
        },
        `项目工时累计信息表_${new Date().getTime()}.xlsx`
      )
    }
  }
}
</script>
